import React from 'react'
import { Input, Button, message } from 'antd'
import { SchemaForm, Item, Submit, SchemaType } from '@amazebird/antd-schema-form'

function CustomItem(props) {
  const { value = {}, onChange } = props
  const { firstName, lastName } = value
  const setFirstName = (e) => {
    value.firstname = e.target.value
    onChange(value)
  }

  const setLastName = (e) => {
    value.lastName = e.target.value
    onChange(value)
  }
  return (
    <>
      <Input value={firstName} placeholder="姓" onChange={setFirstName} style={{ width: 200, marginRight: 10 }} />
      <Input value={lastName} placeholder="名" onChange={setLastName} style={{ width: 200 }} />
    </>)
}

function ValidCode(props) {
  const { value, onChange } = props
  const setValidCode = (e) => {
    value.firstname = e.target.value
    onChange(value)
  }
  return (
    <>
      <Input value={value} onChange={setValidCode} style={{ width: 200, marginRight: 10 }} />
      <Button onClick={() => message.info('验证码发送成功！')}>发送验证码</Button>
    </>)
}

const schema: SchemaType = {
  user: {
    label: '姓名',
    component: CustomItem,
    placeholder: '请输入姓名',
    required: [true, '请输入姓名']
  },
  password: {
    label: '密码',
    component: 'Input.Edit',
    placeholder: '请输入用密码',
    required: true,
    min: [6, '密码最少需要6位数字']
  },
  validCode: {
    label: '验证码',
    component: ValidCode
  }
}

function Base() {
  return (
    <SchemaForm schema={schema}>
      <Item field="user" />
      <Item field="password" />
      <Item field="validCode" />
      <Submit onFinish={(data) => { console.info(data) }} />
    </SchemaForm>
  )
}

export default Base
